<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2020/12/31
  Time: 22:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">

        .div{
            display:none;
            border:1px solid ;
            height:40%;
            width:30%;
            position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/
            top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/
            left:24%;
            z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/
            background: white;
        }

        .div1{
            width: 100%;
            height: 100%;
            opacity:0.3;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/
            filter:alpha(opacity=80);
            display: none;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background-color: rgb(0,0,0);
        }
    </style>
    
    <script>
        var kid;
        chaXunKuCun();
        $(function () {
            //添加点击事件  点击添加按钮开启div
            $("#tianjiab").click(function () {
                $("#tianjiaT").show();
                $("#tianjia1").show();
            })
            //添加点击事件  点击关闭按钮关闭div
            $("#guanbiT").click(function () {
                $("#tianjiaT").hide();
                $("#tianjia1").hide();
            })
            //重置 添加
            $("#chongzhiT").click(function () {
                $("#numberT").val("");
                $("#nameT").val("");
                $("#casT").val("");
                $("#amountT").val("");
                $("#remarkT").val("");
            })
            //重置 修改
            $("#chongzhiX").click(function () {
                $("#numberX").val("");
                $("#nameX").val("");
                $("#casX").val("");
                $("#amountX").val("");
                $("#remarkX").val("");
            })
            //库存 修改判断单选框选中
            $("#xiugaib").click(function () {
                //判断有没有点击到单选框
                var del = $("input[name='name']:checked").val();
                if (del == undefined) {
                    alert("请选择一行数据");
                    return;
                }
                $("#xiuGaiX").show();
                $("#tianjia1").show();
                XiuGaiFuZhi2();
            })
            //关闭修改文本框
            $("#guanbiX").click(function () {
                $("#xiuGaiX").hide();
                $("#tianjia1").hide();
            })
            // 点击增加数量
            // $("#kucunz #tianjiaK").click(function () {
            //     $("#kuCunZengJia").show();
            //     $("#tianjia1").show();
            // })
            //关闭div
            $("#guanbi1").click(function () {
                $("#kuCunZengJia").hide();
                $("#tianjia1").hide();
            })
            //点击减少数量
            // $("#kucunz #jianshaoK").click(function () {
            //     $("#kuCunJianShao").show();
            //     $("#tianjia1").show();
            // })
            //关闭div
            $("#guanbi2").click(function () {
                $("#kuCunJianShao").hide();
                $("#tianjia1").hide();
            })
            //减少数量 触发一个函数
            //var kid1=$("#Id1").val();
            //删除   判断单选框选中
            $("#shanchub").click(function () {
                //判断有没有点击到单选框
                var del = $("input[name='name']:checked").val();
                if (del == undefined) {
                    alert("请选择一行数据");
                    return;
                }
            })
        })
        //增加数量 触发一个函数
        function zengjiaabutton(id) {
            kid=id;
            $("#kuCunZengJia").show();
            $("#tianjia1").show();
        }
        //减少数量 触发一个函数
        function jianshaobutton(id) {
            kid=id;
            $("#kuCunJianShao").show();
            $("#tianjia1").show();
        }
        /**
         * 查询库存表  和 模糊查询
         */
        function chaXunKuCun() {

            var name=$("#name1").val();
            var cas=$("#cas1").val();
            var number=$("#number1").val();//编号

            var data={
                "type":21,
                "name":name,
                "cas":cas,
                "number":number,
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"json",

                success:function (data,status) {
                    $("#tbody1").empty();
                    console.log(data);
                        var tr = "";
                        for (var i = 0; i <data.length ; i++) {

                            if (data[i].amount>0){
                                tr+="<tr style='background-color: #bd93f9'>";
                            }else if(data[i].amount<=0){
                                tr+="<tr style='background-color: red'>";
                            }else if(data[i].amount==null){
                                tr+="<tr style='background-color: #00FFFF'>";
                            }

                            tr+="<td><input type='radio' value='"+data[i].kid+"' name='name'><td>"+data[i].kid+"</td><td>"+data[i].number+"</td><td>"+data[i].name+"</td><td>"
                              +data[i].cas+"</td><td>"+data[i].update_time+"</td><td>"+data[i].amount+"</td><td>"+data[i].remark+"</td><td id='kucunz'><button value='"+data[i].kid+"' id='tianjiaK' onclick='zengjiaabutton("+data[i].kid+")'>" +
                              "增加数量</button><button value='"+data[i].kid+"' id='jianshaoK' onclick='jianshaobutton("+data[i].kid+")'>减少数量</button></td></tr>";
                     }
                        $("#tbody1").append(tr);
                        console.log("成功了库存模糊查询");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }

        /**
         * 查询0库存
         */
        function lingChaXun() {
            var data={
                "type":22,
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"json",

                success:function (data,status) {
                    $("#tbody1").empty();
                    console.log(data);
                    var tr = "";
                    for (var i = 0; i <data.length ; i++) {

                        if (data[i].amount>0){
                            tr+="<tr style='background-color: #bd93f9'>";
                        }else if(data[i].amount<=0){
                            tr+="<tr style='background-color: red'>";
                        }else if(data[i].amount==null){
                            tr+="<tr style='background-color: #00FFFF'>";
                        }

                        tr+="<td><input type='radio' value='"+data[i].kid+"' name='radio'></td>" +
                            "<td>"+data[i].kid+"</td>" +
                            "<td>"+data[i].number+"</td>" +
                            "<td>"+data[i].name+"</td>" +
                            "<td>"+data[i].cas+"</td>" +
                            "<td>"+data[i].update_time+"</td>" +
                            "<td>"+data[i].amount+"</td>" +
                            "<td>"+data[i].remark+"</td>" +
                            "<td><input type='button' value='添加数量' id='tianjiaK'><input type='button' value='减少数量' id='jianshaoK'></td></tr>";

                    }
                    $("#tbody1").append(tr);



                    console.log("成功了库存模糊查询");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }

        /**
         * 添加
         */
        function tianJia() {
            var number=$("#numberT").val();
            var name=$("#nameT").val();
            var cas=$("#casT").val();
            var amount=$("#amountT").val();
            var remark=$("#remarkT").val();

            if(""==$("#numberT").val() || ""==$("#nameT").val() ||
                ""==$("#casT").val() || ""==$("#amountT").val() || ""==$("#remarkT").val()){
                alert("不能为空");
                return;
            }

            var data={
                "type":23,
                "name":name,
                "cas":cas,
                "number":number,
                "amount":amount,
                "remark":remark,
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                //dataType:"text",

                success:function (data,status) {

                    //window.location.href="/view/kuCun.jsp";
                     chaXunKuCun();
                    $("#tianjiaT").hide();
                    $("#tianjia1").hide();
                    console.log("成功了库存添加");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * 库存 修改
         */
        function kunCunXiuGai() {

            var number=$("#numberX").val();
            var name=$("#nameX").val();
            var cas=$("#casX").val();
            var amount=$("#amountX").val();
            var remark=$("#remarkX").val();
            var kid=$("input[name='name']:checked").val();

            if(""==$("#numberX").val() || ""==$("#numberX").val() ||
                ""==$("#casX").val() || ""==$("#amountX").val() || ""==$("#remarkX").val()){
                alert("不能为空");
                return;
            }

            var data={
                "number":number,
                "name":name,
                "cas":cas,
                "amount":amount,
                "remark":remark,
                "kid":kid,
                "type":24,
            }
            $.ajax({
                url:"/se", //地址
                type:"post",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                    if(status=="success") {
                        console.log("成功了库存修改");
                        chaXunKuCun();
                        $("#xiuGaiX").hide();
                        $("#tianjia1").hide();
                    }
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * ，库存  删除
         */
        function shanChu() {

            var kid=$("input[name='name']:checked").val();

            var data={
                "type":26,
                "kid":kid
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                    chaXunKuCun();
                    console.log("成功了删除");
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * 库存 增加数量
         */
        function kunCunZengJia(kid) {

            var amount=$("#zengjia").val();

            if(""==$("#zengjia").val()){
                alert("不能为空");
                return;
            }


            var data={
                "amount":amount,
                "kid":kid,
                "type":27,
            }
            $.ajax({
                url:"/se", //地址
                type:"post",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                    if(status=="success") {
                        console.log("成功了库存增加");
                        $("#kuCunZengJia").hide();
                        $("#tianjia1").hide();
                        $("#zengjia").val("");
                        chaXunKuCun();
                    }
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }

        /**
         * 库存 减少
         * @param kid
         */
        function kunCunJianShao(kid) {

            var amount=$("#jianshao").val();

            if(""==$("#jianshao").val()){
                alert("不能为空");
                return;
            }

            var data={
                "amount":amount,
                "kid":kid,
                "type":28,
            }
            $.ajax({
                url:"/se", //地址
                type:"post",                          //请求方式
                data:data,                         //参数
                dataType:"text",

                success:function (data,status) {
                    if(status=="success") {
                        console.log("成功了库存减少");
                        $("#kuCunJianShao").hide();
                        $("#tianjia1").hide();
                        $("#jianshao").val("");
                        chaXunKuCun();
                    }
                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }


        /**
         * 修改文本框 放值
         */
        function XiuGaiFuZhi2() {

            var kid=$("input[name='name']:checked").val();

            var data={
                "type":25,
                "kid":kid
            }
            $.ajax({
                url:"/se", //地址
                type:"get",                          //请求方式
                data:data,                         //参数
                dataType:"json",

                success:function (data,status) {
                    $("#numberX").val(data.number);
                    $("#nameX").val(data.name);
                    $("#casX").val(data.cas);
                    $("#amountX").val(data.amount);
                    $("#remarkX").val(data.remark);
                    console.log("成功了修改放值文本框");

                },
                error:function (jqxhr,textStatus,error) {
                    console.log("报错了");
                    console.log(error);
                }
            })
        }

    </script>
</head>
<body>
<div style="display: flex;margin-left: 15%">
    <form action="/se" method="post" class="layui-inline">
        <input type="hidden" name="type" value="">
        品名<input type="text" placeholder="请输入" name="name" value="" id="name1">
        cas号<input type="text" placeholder="请输入" name="uid" value="" id="cas1">
        编号<input type="text" placeholder="请输入" name="" value="" id="number1">
        <input type="button" value="查询" style="background-color: #00feff" onclick="chaXunKuCun()">
    </form>

    <input type="button" value="查询0库存" id="chaxun0b" style="background-color: #50fa7b;height: 26px" onclick="lingChaXun()">
    <input type="button" value="添加" id="tianjiab" style="background-color: #50fa7b;height: 26px">
    <input type="button" value="修改" id="xiugaib" style="background-color: #50fa7b;height: 26px" onclick="xiuGaiFangZhi()">
    <input type="button" value="删除" id="shanchub" style="background-color: #50fa7b;height: 26px" onclick="shanChu()">

</div>
<table class="table table-striped">
    <caption></caption>
    <thead>
    <tr>
        <th></th>
        <th>序号</th>
        <th>库存编号</th>
        <th>产品名称</th>
        <th>cas号</th>
        <th>更新日期</th>
        <th>库存数量</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody1">
<%--        <tr>--%>
<%--        <td><input type="radio" name="name" value="${item.gid}"></td>--%>
<%--        <td>${item.gid}</td>--%>
<%--        <td>${item.user_name}</td>--%>
<%--        <td>${item.name}</td>--%>
<%--        <td>${item.phone}</td>--%>
<%--        <td>${item.wechat}</td>--%>
<%--        <td>${item.status}</td>--%>
<%--        <td>${item.create_time}</td>--%>
<%--        <td>${item.remark}</td>--%>
<%--        </tr>--%>
    </tbody>
</table>

<!--库存添加-->
<div class="div" id="tianjiaT" hidden="hidden" style="height: 50vh;overflow-y: scroll">
    <table>
        <tr>
            <td><p>信息</p></td>
        </tr>
        <tr>
            <td>库存编号:</td>
            <td><input  placeholder="请输入库存编号" value="" id="numberT"></td>
        </tr>
        <tr>
            <td>品名:</td>
            <td><input  placeholder="请输入品名"  value="" id="nameT"></td>
        </tr>
        <tr>
            <td>cas号:</td>
            <td><input  placeholder="请输入cas号" value="" id="casT"></td>
        </tr>
        <tr>
            <td>数量:</td>
            <td><input  placeholder="请输入数量" value="" id="amountT">kg</td>
        </tr>
        <tr>
            <td><p>备注:</p></td>
            <td><textarea placeholder="建议"  value=""style="height: 108px; margin: 0px; width: 202px;" id="remarkT"></textarea></td>
        </tr>
        <tr>
            <td><input type="button" value="立即提交" onclick="tianJia()"></td>
            <td><input type="button" value="关闭" id="guanbiT"></td>
            <td><input type="button" value="重置" id="chongzhiT"></td>
        </tr>
    </table>
</div>

<!--库存修改-->
<div class="div" id="xiuGaiX" hidden="hidden" style="height: 50vh;overflow-y: scroll">
    <table>
        <tr>
            <td><p>信息</p></td>
        </tr>
        <tr>
            <td>库存编号:</td>
            <td><input  placeholder="请输入供应商名称" value="" id="numberX"></td>
        </tr>
        <tr>
            <td>品名:</td>
            <td><input  placeholder="请输入产品名称"  value="" id="nameX"></td>
        </tr>
        <tr>
            <td>cas号:</td>
            <td><input  placeholder="请输入cas号" value="" id="casX"></td>
        </tr>
        <tr>
            <td>数量:</td>
            <td><input  placeholder="请输入报价信息" value="" id="amountX">kg</td>
        </tr>
        <tr>
            <td><p>备注:</p></td>
            <td><textarea placeholder="建议"  value="" style="height: 108px; margin: 0px; width: 202px;" id="remarkX"></textarea></td>
        </tr>
        <tr>
            <td><input type="button" value="立即提交"  onclick="kunCunXiuGai()"></td>
            <td><input type="button" value="关闭" id="guanbiX"></td>
            <td><input type="button" value="重置" id="chongzhiX"></td>
        </tr>
    </table>
</div>


<!--库存增加-->
<div class="div" id="kuCunZengJia" hidden="hidden" style="height: 50vh;overflow-y: scroll">
            <p>请输入要添加的数量</p><br/>
            <input type="text" value="" id="zengjia"><br/>
            <input type="button" value="确定" onclick="kunCunZengJia(kid)">
            <input type="button" value="关闭" id="guanbi1">
</div>

<!--库存减少-->
<div class="div" id="kuCunJianShao" hidden="hidden" style="height: 50vh;overflow-y: scroll">
    <p>请输入要减少的数量</p><br/>
    <input type="text" value="" id="jianshao"><br/>
    <input type="button" value="确定" onclick="kunCunJianShao(kid)">
    <input type="button" value="关闭" id="guanbi2">
</div>

<input type="hidden" name="kid" value="" id="Id1">
<div class="div1" hidden="hidden" id="tianjia1"></div>
</body>
</html>
